<template>
  <el-row style="width: 100%;height: min-content;border-radius: 16px;margin: 2%;float: left;padding-bottom: 16px;" class="item-container" >
    <el-row style="float: left; display: flex; width: 100%;">
      <el-col style="width: 72px; height: 72px;">
        <el-image
          style="width: 40px; height: 40px; margin: 16px;" :src=type fit="fit"></el-image>
      </el-col>
      <el-col style="flex: 1; height: 72px; padding: 16px 4px; color: #0E0E0E;">
        <el-row style="text-align: revert; height: 24px">
          {{nameP}}
        </el-row>
        <el-row style="text-align: revert; height: 12px; font-size: 12px; color: #525252;">
         ID：{{idP}}
        </el-row>
      </el-col>
      <el-col style="width: 140px; height: 72px;justify-content: right">
        <el-row style="justify-content: right;width: 100%;display: flex;">
<!--          <el-tag type="success" style="border-radius: 0 16px 0 16px;" s>开机</el-tag>-->
          <el-tag type="danger" style="border-radius: 0 16px 0 16px;">关机</el-tag>
<!--          <el-tag type="warning" style="border-radius: 0 16px 0 16px;" s>重启中</el-tag>-->
        </el-row>
        <el-row>
          <el-button type="primary" icon="el-icon-monitor" circle size="mini" @click="cloudShell()"></el-button>
          <el-button type="primary" icon="el-icon-switch-button" circle size="mini"  :loading="true" @click="start2stop()"></el-button>
          <el-button type="danger" icon="el-icon-refresh-right" circle size="mini" @click="restart()"></el-button>
        </el-row>
      </el-col>
    </el-row>

<!--    <el-row style="color: #0E0E0E">-->
<!--      <el-col style="width: 50%;justify-content: center;text-align: center;" >-->
<!--        <el-tag type="success" style="width: 80%;margin-left: 10%;">Net ↑240/↓230Mbps</el-tag>-->
<!--      </el-col>-->
<!--      <el-col style="width: 50%;justify-content: center;text-align: center;" >-->
<!--        <el-tag type="success"  style="width: 80%;margin-right: 10%;">I/O ↑240/↓230Mbps</el-tag>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <el-row style="color: #0E0E0E;justify-content: center;text-align: center;display: flex;margin: 8px 5%;width: 90%">
      <el-col style="width: 36px;justify-content: center;text-align: center;font-size: 12px" >CPU</el-col>
      <el-col style="flex: 1">
        <el-progress :percentage=20 :stroke-width=1 color="#2080F0"></el-progress>
      </el-col>
    </el-row>

    <el-row style="color: #0E0E0E;justify-content: center;text-align: center;display: flex;margin: 8px 5%;;width: 90%">
      <el-col style="width: 36px;justify-content: center;text-align: center;font-size: 12px" >RAM</el-col>
      <el-col style="flex: 1">
        <el-progress :percentage=60 :stroke-width=1 color="#18A058"></el-progress>
      </el-col>
    </el-row>

    <el-row style="color: #0E0E0E">
      <el-col style="width: 50%;justify-content: center;text-align: center;" >
        <el-tag style="width: 80%;margin-left: 10%;">Net ↑240/↓230Mbps</el-tag>
      </el-col>
      <el-col style="width: 50%;justify-content: center;text-align: center;" >
        <el-tag type="success"  style="width: 80%;margin-right: 10%;">I/O ↑240/↓230Mbps</el-tag>
      </el-col>
    </el-row>


  </el-row>


</template>

<script>
import lxc_png from '@/assets/dashboard/lxc.png'
import vm_png from '@/assets/dashboard/vm.png'
import docker_png from '@/assets/dashboard/docker.png'
import DraggableWindow from "@/components/DraggableWindow/index.vue";


export default {
  name: "MonitorItem",
  components: {DraggableWindow},
  props: {
    nameP: {
      type: String,
      default: "磁盘",
    },
    idP: {
      type: String,
      default: "123",
    },
    typeP: {
      type: String,
      default: "vm"
    },
    percentageP: {
      type: Number,
      default: 0
    },
    urlP: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      type: vm_png,
    }
  },
  created() {
    switch (this.typeP) {
      case "lxc":
        this.type = lxc_png;
        break;
      case "vm":
        this.type = vm_png;
        break;
      case "docker":
        this.type = docker_png;
        break;
    }
  },
  computed: {},
  filters: {},
  methods: {

    restart(){
      this.$confirm('此操作将重启实例, 是否继续?', '提示', {
        confirmButtonText: '重启',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除'
        });
      });
    },
    start2stop(){

      //判断当前状态

      this.$confirm('此操作将重启实例, 是否继续?', '提示', {
        confirmButtonText: '重启',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除'
        });
      });
    },
    cloudShell(){
      this.$emit("openWindow");
    },


  },
}
</script>
<style scoped>

.item-container {
  position: relative;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  //box-shadow: 0 8px 32px rgba(140, 140, 140, 0.1);
  //border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

</style>
